<template>
    <div class="workbench">
        <div class="md:flex">
            <el-card class="!border-none mb-4 flex-1" shadow="never">
                <template #header>
                    <div>
                        <span class="card-title">今日数据</span>
<!--                        <span class="text-tx-secondary text-xs ml-4">-->
<!--                            更新时间：{{ workbenchData.today.time }}-->
<!--                        </span>-->
                    </div>
                </template>

                <div class="flex flex-wrap">
                    <div class="w-1/2 md:w-1/4">
                        <div class="leading-10">销售额</div>
                        <div class="text-6xl">
                            {{ workbenchData.today_order_amount }}
                        </div>
                        <div class="text-tx-secondary text-xs">
                            昨日：{{ workbenchData.yesterday_order_amount }}
                        </div>
                    </div>
                    <div class="w-1/2 md:w-1/4" style="cursor: pointer" @click="router.push({path: '/order/order', query: {time: 'today'}})">
                        <div class="leading-10">成交订单</div>
                        <div class="text-6xl">
                            {{ workbenchData.today_order_count }}
                        </div>
                        <div class="text-tx-secondary text-xs">
                            昨日：{{ workbenchData.yesterday_order_count }}
                        </div>
                    </div>
                    <div class="w-1/2 md:w-1/4">
                        <div class="leading-10">新增用户</div>
                        <div class="text-6xl">
                            {{ workbenchData.today_user }}
                        </div>
                        <div class="text-tx-secondary text-xs">
                            昨日：{{ workbenchData.yesterday_user }}
                        </div>
                    </div>
                </div>
            </el-card>
        </div>
        <div class="function mb-4">
            <el-card class="!border-none mb-4 flex-1" shadow="never">
                <div class="flex flex-wrap">
                    <div class="w-1/2 md:w-1/4" style="cursor: pointer" @click="router.push('/finance/moneyOut')">
                        <div class="leading-10">红包发放总金额</div>
                        <div class="text-6xl">
                            {{ workbenchData.order_total }}
                        </div>
                        <!--                        <div class="text-tx-secondary text-xs">-->
                        <!--                            昨日：{{ workbenchData.today.yesterday_order_num }}-->
                        <!--                        </div>-->
                    </div>
                    <div class="w-1/2 md:w-1/4" style="cursor: pointer" @click="router.push('/finance/moneyOut')">
                        <div class="leading-10">今日红包发放总额</div>
                        <div class="text-6xl">
                            0
<!--                            {{ workbenchData.user_total }}-->
                        </div>
                        <!--                        <div class="text-tx-secondary text-xs">-->
                        <!--                            昨日：{{ workbenchData.today.yesterday_sales }}-->
                        <!--                        </div>-->
                    </div>
                    <div class="w-1/2 md:w-1/4">
                        <div class="leading-10">今日流量使用量</div>
                        <div class="text-6xl">
                            {{ workbenchData.order_amount }}
                        </div>
                        <!--                        <div class="text-tx-secondary text-xs">-->
                        <!--                            昨日：{{ workbenchData.today.yesterday_new_user }}-->
                        <!--                        </div>-->
                    </div>
                </div>
            </el-card>
            <el-card class="!border-none mb-4 flex-1" shadow="never">
                <div class="flex flex-wrap">
                    <div class="w-1/2 md:w-1/4" style="cursor: pointer" @click="router.push('/order/order')">
                        <div class="leading-10">订单总量</div>
                        <div class="text-6xl">
                            {{ workbenchData.order_total }}
                        </div>
<!--                        <div class="text-tx-secondary text-xs">-->
<!--                            昨日：{{ workbenchData.today.yesterday_order_num }}-->
<!--                        </div>-->
                    </div>
                    <div class="w-1/2 md:w-1/4" style="cursor: pointer" @click="router.push('/order/order')">
                        <div class="leading-10">订单总金额</div>
                        <div class="text-6xl">
                            {{ workbenchData.order_amount }}
                        </div>
<!--                        <div class="text-tx-secondary text-xs">-->
<!--                            昨日：{{ workbenchData.today.yesterday_new_user }}-->
<!--                        </div>-->
                    </div>
                    <div class="w-1/2 md:w-1/4">
                        <div class="leading-10">退款总金额</div>
                        <div class="text-6xl">
                            {{ workbenchData.order_amount }}
                        </div>
                        <!--                        <div class="text-tx-secondary text-xs">-->
                        <!--                            昨日：{{ workbenchData.today.yesterday_new_user }}-->
                        <!--                        </div>-->
                    </div>
                </div>
            </el-card>
            <el-card class="!border-none mb-4 flex-1" shadow="never">
                <div class="flex flex-wrap">
                    <div class="w-1/2 md:w-1/4" style="cursor: pointer" @click="router.push('/consumer/lists')">
                        <div class="leading-10">用户总量</div>
                        <div class="text-6xl">
                            {{ workbenchData.user_total }}
                        </div>
                        <!--                        <div class="text-tx-secondary text-xs">-->
                        <!--                            昨日：{{ workbenchData.today.yesterday_sales }}-->
                        <!--                        </div>-->
                    </div>
                    <div class="w-1/2 md:w-1/4">
                        <div class="leading-10">红包余额</div>
                        <div class="text-6xl">
                            {{ workbenchData.red_price }}
                        </div>
<!--                        <div class="text-tx-secondary text-xs">-->
<!--                            昨日：{{ workbenchData.today.yesterday_sales }}-->
<!--                        </div>-->
                    </div>
                    <div class="w-1/2 md:w-1/4">
                        <div class="leading-10">流量余额</div>
                        <div class="text-6xl">
                            {{ workbenchData.flow_rate }}
                        </div>
<!--                        <div class="text-tx-secondary text-xs">-->
<!--                            昨日：{{ workbenchData.today.yesterday_order_num }}-->
<!--                        </div>-->
                    </div>
                </div>
            </el-card>
            <el-card class="!border-none mb-4 flex-1" shadow="never">
                <div class="flex flex-wrap" style="cursor: pointer" @click="router.push('/finance/leaderMoney')">
                    <div class="w-1/2 md:w-1/4">
                        <div class="leading-10">团长佣金总金额</div>
                        <div class="text-6xl">
                            {{ workbenchData.withdraw_sum }}
                        </div>
<!--                        <div class="text-tx-secondary text-xs">-->
<!--                            昨日：{{ workbenchData.today.yesterday_sales }}-->
<!--                        </div>-->
                    </div>
                    <div class="w-1/2 md:w-1/4">
                        <div class="leading-10">团长提现到账总金额</div>
                        <div class="text-6xl">
                            {{ workbenchData.withdraw_sum_real }}
                        </div>
<!--                        <div class="text-tx-secondary text-xs">-->
<!--                            昨日：{{ workbenchData.today.yesterday_order_num }}-->
<!--                        </div>-->
                    </div>
                    <div class="w-1/2 md:w-1/4">
                        <div class="leading-10">团长提现手续费总金额</div>
                        <div class="text-6xl">
                            {{ workbenchData.withdraw_sum_rate }}
                        </div>
<!--                        <div class="text-tx-secondary text-xs">-->
<!--                            昨日：{{ workbenchData.today.yesterday_order_num }}-->
<!--                        </div>-->
                    </div>
                </div>
            </el-card>
        </div>
<!--        <div class="md:flex">-->
<!--            <el-card class="flex-1 !border-none md:mr-4 mb-4 h-[450px]" shadow="never">-->
<!--                <template #header>-->
<!--                    <span>近10天用户增长趋势</span>-->
<!--                </template>-->
<!--                <div>-->
<!--                    <v-charts-->
<!--                        style="height: 350px"-->
<!--                        :option="workbenchData.turnoverOption"-->
<!--                        :autoresize="true"-->
<!--                    />-->
<!--                </div>-->
<!--            </el-card>-->
<!--            <el-card class="flex-1 !border-none mb-4 h-[450px]" shadow="never">-->
<!--                <template #header>-->
<!--                    <span>近10天订单增长趋势</span>-->
<!--                </template>-->
<!--                <div>-->
<!--                    <v-charts-->
<!--                        style="height: 350px"-->
<!--                        :option="workbenchData.visitorOption"-->
<!--                        :autoresize="true"-->
<!--                    />-->
<!--                </div>-->
<!--            </el-card>-->
<!--        </div>-->
    </div>
</template>

<script lang="ts" setup name="workbench">
import {
    getWorkbenchInfo,
} from '@/api/app'
const router = useRouter()
// import { BorderBox1 } from '@dataview/datav-vue3';
import vCharts from 'vue-echarts'
import useAppStore from '@/stores/modules/app'
import {PageEnum} from "@/enums/pageEnum";
// 商品图标
// const appStore = useAppStore()
// const config = computed(() => appStore.config)
// 表单数据
const workbenchData: any = reactive({
    "user_total": 0, //用户总数
    "order_total": 0, //订单总数量
    "order_amount": 0, //总销售额

    "order_amount_refund": 0, //总退款金额

    "today_order_amount": 0, //今日销售金额
    "yesterday_order_amount": 0, //昨日销售金额

    "today_order_count": 0, //今日订单数数量
    "yesterday_order_count": 0, //昨日订单数量

    "today_user": 0, //今日新增用户
    "yesterday_user": 0, //昨日新增用户

    "red_price": 0, //当前红包余额
    "flow_rate": 0, //当前流量剩余

    "withdraw_sum": 0, //总提现金额
    "withdraw_sum_rate": 0, //总手续费
    "withdraw_sum_real": 0 //总到账金额
})

// 获取工作台主页数据
const getData = () => {
    getWorkbenchInfo()
        .then((data: any) => {
            for (const key in workbenchData) {
                if (data[key] != null && data[key] != undefined) {
                    //@ts-ignore
                    workbenchData[key] = data[key];
                }
            }
        })
        .catch((err: any) => {
            console.log('err', err)
        })
}


// router.push(PageEnum.LOGIN)

getData()
</script>

<style lang="scss" scoped>
    .workbench {
        /*border: 1px red solid;*/
        .function {
            /*border: 1px red solid;*/
            .card-div {
                /*border: 1px #B6B6B6 solid;*/
                padding: 20px;
            }
        }
    }
</style>
